<div class="row">
    <h4 class="center">Pay reservation number {{res_id}}</h4>
</div>


<div class="row" ng-if="!paid">
    <div class="col s12 m4 offset-m4">
        <div class="card-panel">
            <form stripe-form="handleStripe" name="myForm">
                <div class="row">
                    <div class="input-field col s12">
                        <label for="name">Name on card </label>
                        <input type="text" id="name">
                    </div></div>
                <div class="row">
                    <div class="input-field col s12">
                        <label for="cardn">Card number</label>
                        <input type="text" name="number" id="cardn"  ng-model="number" payments-validate="card" payments-format="card" payments-type-model="type" ng-class="myForm.number.$card.type"/>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s6">
                        <label for="exp">Expiry</label>
                        <input type="text" id="exp" ng-model="expiry" payments-validate="expiry" payments-format="expiry" />
                    </div>
                    <div class="input-field col s6">
                        <label for="cvc">CVC</label>
                        <input type="text" id="cvc" ng-model="cvc" payments-validate="cvc" payments-format="cvc" payments-type-model="type"/>
                    </div>
                </div>
                <div class="row">
                    <div class="input-field col s12">
                        <button ng-if='loaded==true && paid==false' type="submit" class="btn btn-primary btn-large">Pay {{reservation_info.total_price}}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="row"  ng-if="paid">
    <div class="col s12 m4 offset-m4">
        <div class="card-panel">
    <h2><p>{{message}}</p></h2>
        </div>
    </div>
</div>